<template>
  <div class="role">
    <div class="role_header">
      <el-form :inline="true" id="demo_form_inline">
        <el-form-item label="角色名称">
          <el-input v-model="username" placeholder="角色名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>清空</el-button>
        </el-form-item>
      </el-form>
      <div v-show="flags" class="Mask_layer">
        <div class="div_ipt">
          <div class="close_div">
            <span>{{ titles == "新增" ? "新增" : "编辑" }}</span>
            <span
              class="hoverhe"
              @click="
                () => {
                  flags = false;
                }
              "
              >X</span
            >
          </div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="角色名称" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="角色名称"
                size="large"
                class="input_one"
              />
            </el-form-item>
            <el-form-item prop="Email" label="备注">
              <el-input v-model="ruleForm.rename" class="input_one" />
            </el-form-item>
            <el-form-item label="授权">
              <el-tree
                ref="treeRef"
                :data="role_store.role_flag_list"
                show-checkbox
                node-key="menuId"
                highlight-current
                :props="defaultProps"
                :default-expand-all="false"
                :default-checked-keys="role_store.edit_flag_obj.menuIdList"
              />
            </el-form-item>
          </el-form>
          <div class="footers">
            <span
              @click="
                () => {
                  flags = false;
                }
              "
              >取消</span
            >
            <span class="blues" @click="getCheckedKeys">确定</span>
          </div>
        </div>
      </div>
    </div>
    <avue-crud
      :option="option"
      :data="role_store.role_list"
      @on-load="onLoad"
      :page="page"
      ref="crud"
    >
      <template #menu-left="{ size }">
        <el-button type="primary" :size="size" @click="add_list"
          >新建</el-button
        >
      </template>
      <template #menu="{ row, size }">
        <el-button
          type="primary"
          :size="size"
          icon="el-icon-edit"
          @click="edit_list(row)"
          >编辑</el-button
        >
        <el-button
          type="danger"
          :size="size"
          icon="el-icon-delete"
          @click="del_list(row)"
          >删除</el-button
        >
      </template>
    </avue-crud>
  </div>
</template>


<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox, ElTree } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { cole } from "../../../../store/role";
const role_store = cole();
let num = 1;
const formInline: any = {
  user: "",
  region: "",
};

const ruleForm = reactive({
  name: "",
  rename: "",
  // userId: "",
});

const username = ref("");

const rules = reactive<FormRules>({
  name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
});

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

//新增弹框选中数组
let addlist = [];
const treeRef = ref<InstanceType<typeof ElTree>>();

const defaultProps = {
  children: "children",
  label: "name",
};

const titles = ref("新增");
//控制弹框
let flags = ref(false);
const page: any = {
  currentPage: 1,
  pageSize: 10,
};
const option: any = {
  addBtn: false,
  delBtn: false,
  editBtn: false,
  excelBtn: true,
  selection: true,
  selectionWidth: 100,
  selectionFixed: false,
  border: true,
  expandLevel: 3,
  headerAlign: "center",
  align: "center",
  tree: true,
  labelWidth: 100,
  column: [
    {
      width: 130,
      label: "角色名称",
      prop: "roleName",
      display: false,
    },
    {
      label: "备注",
      prop: "remark",
      display: false,
    },
    {
      label: "创建时间",
      prop: "createTime",
      display: false,
    },
    {
      label: "测试",
      prop: "roleId",
      display: false,
    },
  ],
};

//获取数据
const get_List = () => {
  role_store.get_list();
};
get_List();
const onLoad = (page: any) => {
  //模拟分页
  page.total = 40;
};
const add_list = () => {
  role_store.edit_flag_obj.menuIdList = [];
  titles.value = "新增";
  if (titles.value == "新增") {
    flags.value = true;
    role_store.flag_list();
  }
};

let edit_id = "";
const edit_list = (obj: any) => {
  role_store.edit_flag(obj.roleId);

  titles.value = "编辑";
  flags.value = true;

  ruleForm.name = obj.roleName;
  ruleForm.rename = obj.remark;
  edit_id = obj.roleId;
  role_store.flag_list();
};

const getCheckedKeys = () => {
  //点击新增弹框
  if (titles.value == "新增") {
    addlist = treeRef.value!.getCheckedKeys(false);
    role_store.add_list({
      roleName: ruleForm.name,
      remark: ruleForm.rename,
      menuIdList: addlist,
    });
    flags.value = false;
  } else {
    //带你编辑弹框
    addlist = treeRef.value!.getCheckedKeys(false);
    role_store.edit_list({
      roleName: ruleForm.name,
      remark: ruleForm.rename,
      menuIdList: addlist,
      roleId: edit_id,
    });
    flags.value = false;
  }
};

const onSubmit = () => {
  role_store.search_lst(username.value);
};

const del_list = (obj: any) => {
  ElMessageBox.confirm(`确定对[${obj.roleId}]进行[删除]操作吗`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      role_store.del_list(obj);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
};
</script>
<style>
@import "./role.css";
</style>